<template>
  <div class="mine">
      <div class="mine_top_box">
        <div class="mine_top_container">
          <div class="mine_mainpic">
            <img src="../assets/105953dp1lq1upvupqtqqm.jpg" alt="">
          </div>
          <div class="mine_content">
            <h1 v-show="this.minetoken == null || this.minetoken == ''" @click="goLogin">立即登录</h1>
            <p class="mine_point">积分：114</p>
            <p class="mine_out" @click="outToken">退出登录</p>
          </div>
        </div>
    </div>

      <div class="mine_scroll">
        <p class="mine_scroll_icon">
          <img src="../assets/mineItem/tongzhi.png" alt="">
        </p>
        <marquee class="mine_scroll_text">新上线更稳定的付费快递查询接口</marquee>
      </div>

      <div class="mine_order">
        <div class="mine_order_icon">
          <img src="../assets/mineItem/dd.png" width="30%" valign="middle" />
          <span>我的订单</span>
        </div>
        <div class="mine_order_goto">
          <img src="../assets/icon/qianwang.png" alt="" />
        </div>
      </div>

        <div class="mine_content_four">
          <div class="mine_content_item">
            <div class="mine_content_icon">
              <img src="../assets/mineItem/payment.png" width="28%">
            </div>
            <div class="mine_content_text">待付款</div>
          </div>
          <div class="mine_content_item">
            <div class="mine_content_icon">
              <img src="../assets/mineItem/icon2.png" width="28%">
            </div>
            <div class="mine_content_text">待发货</div>
          </div>
          <div class="mine_content_item">
            <div class="mine_content_icon">
              <img src="../assets/mineItem/daishouhuo.png" width="28%">
            </div>
            <div class="mine_content_text">待收货</div>
          </div>
          <div class="mine_content_item">
            <div class="mine_content_icon">
              <img src="../assets/mineItem/daipingjia.png" width="28%">
            </div>
            <div class="mine_content_text">待评价</div>
          </div>
      </div>

        <div class="mine_content_six">
          <div class="mine_content_item_six">
            <div class="mine_content_icon">
              <img src="../assets/mineItem/yue.png" width="20%">
            </div>
            <div class="mine_content_text">我的余额</div>
          </div>
          <div class="mine_content_item_six">
            <div class="mine_content_icon">
              <img src="../assets/mineItem/wodekanjia.png" width="20%">
            </div>
            <div class="mine_content_text">我的砍价</div>
          </div>
          <div class="mine_content_item_six">
            <div class="mine_content_icon">
              <img src="../assets/mineItem/liquanhuodong.png" width="20%">
            </div>
            <div class="mine_content_text">我的礼券</div>
          </div>
          <div class="mine_content_item_six">
            <div class="mine_content_icon">
              <img src="../assets/mineItem/shoucang1.png" width="20%">
            </div>
            <div class="mine_content_text">我的收藏</div>
          </div>
          <div class="mine_content_item_six" @click="goto">
            <div class="mine_content_icon">
              <img src="../assets/mineItem/kdizhi.png" width="20%">
            </div>
            <div class="mine_content_text">我的地址</div>
          </div>
          <div class="mine_content_item_six">
            <div class="mine_content_icon">
              <img src="../assets/mineItem/kefu1.png" width="20%">
            </div>
            <div class="mine_content_text">联系客服</div>
          </div>
      </div>
      <div class="mine_bottom">The Work For Li ShengYi</div>
  </div>
</template>

<script>
import PATH from '../router/constant'
export default {
  data() {
    return {
      minetoken: ''
    }
  },
  mounted() {
    var token = localStorage.token;
    if(token) {
      this.minetoken = JSON.parse(localStorage.token)
    }else {
      this.minetoken = ''
    }
  },
  methods: {
    goLogin() {
      this.$router.push(PATH.LOGIN)
    },
    goto() {
      if(localStorage.token) {
        this.$router.push(PATH.ADDRESS)
      }else {
        this.$router.push(PATH.LOGIN)
      }
    },
    outToken() {
      this.$router.push(PATH.LOGIN)
      localStorage.removeItem('token')
    }
  }
}
</script>

<style scoped>
.mine {
  background-color: #eee;
}
.mine_top_box {
  width: 100%;
  height: 3rem;
  background-color: #C1B18F;
  color: white;
  font-size: 0.2rem;
}
.mine_top_container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mine_mainpic {
  width: 30%;
  height: 100%;
  text-align: center;
  line-height: 3rem;
}
.mine_mainpic img {
  width: 80%;
  height: 55%;
  border-radius: 100%;
  margin-top: 30%;
}
.mine_content {
  width: 70%;
  margin-top: 0.6rem;
}
.mine_point {
  width: 1.5rem;
  padding: 0.1rem 0.2rem;
  background-color: #B6A37D;
}
.mine_scroll {
  color: red;
  font-size: 0.2rem;
  width: 100%;
  height: 0.8rem;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.mine_scroll_icon {
  width: 6%;
}
.mine_order {
  font-size: 0.2rem;
  width: 100%;
  height: 0.8rem;
  margin-top: 0.2rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.01rem solid #eee;
  margin-top: 0.2rem;
  color: black;
}
.mine_order_icon {
  width: 20%;
}
.mine_content_four {
  width: 100%;
  height: 1.8rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 0.25rem;
  color: #666;
  background-color: #fff;
  text-align: center;
}
.mine_content_item {
  width: 25%;
}
.mine_content_six {
  width: 100%;
  height: 2.8rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.25rem;
  color: #666;
  background-color: #fff;
  text-align: center;
  margin-top: 0.2rem;
}
.mine_content_item_six {
  width: 33%;
}
.mine_bottom {
  text-align: center;
  font-size: 0.2rem;
  color: #666;
}
</style>